<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>小黑记事本</h2>
    <input type="text"  v-model="content" @keyup.enter="fun1(content)">
    <div v-for="(item,index) in arr " v-text="item.index+'   '+item.content"  >
            <input type="button" value="删除">
    </div>

    <h2>{{arr.length}}</h2>
    <button @click="qingkong">清空</button>
</div>
<script>
    var i=1
    var app=new Vue({
        el:"#app",
        data:{
            arr:[{"index":i,"content":"吃饭饭"}]
        },
        methods:{
            fun1:function (content) {
                if (content){
                    this.arr.push({"index":this.arr[this.arr.length-1].index+1,"content":content})
                }
            },
            qingkong:function () {
                this.arr.remove();
            },
            clear:function (index) {
                this.arr.shift(index);
            }
        }

    })
</script>
</body>
</html>